<template>
  <t-collapse borderless="true" @change="handlePanelChange">
    <t-collapse-panel value="0" header="websocket">
      
      这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </t-collapse-panel>
    <t-collapse-panel value="1" header="MQTT">
      <t-form label-align="left">
        <t-form-item name="mqtt">
          <template #label>
              URL地址*
              <t-tooltip content="必须以ws开头，否则不保存">
                <t-icon name="help-circle" />
              </t-tooltip>
          </template>
          <t-input v-model="data.mqtt" @change="onChangeData" placeholder="" />
        </t-form-item>
        <!-- <t-form-item label="Client ID" name="name">
          <t-input v-model="data.background" placeholder="唯一ID,可为空" />
        </t-form-item> -->
        <t-form-item label="用户名" name="username">
          <t-input v-model="data.mqttOptions.username" @change="onChangeData" placeholder="" />
        </t-form-item>
        <t-form-item label="密码" name="password">
          <t-input v-model="data.mqttOptions.password" @change="onChangeData" placeholder="" />
        </t-form-item>
        <t-form-item label="Topics*" name="mqttTopics">
          <t-input v-model="data.mqttTopics" @change="onChangeData" placeholder="多个topic以英文逗号“,”分隔" />
        </t-form-item>
      </t-form>
    </t-collapse-panel>
    <t-collapse-panel value="2" header="http1">
      <template #default
      >这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。</template
      >
    </t-collapse-panel>
  </t-collapse>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';

const handlePanelChange = (val: any) => {
  console.log(val);
};

// 图纸数据
const data = reactive<any>({
  mqtt: '',
  mqttOptions: {
    username: '',
    password: ''
  },
  mqttTopics: "",
});

// 画布选项
const options = reactive<any>({
  grid: true,
  gridSize: 10,
  gridRotate: undefined,
  gridColor: undefined,
  rule: false,
});

onMounted(() => {
  const d: any = meta2d.data();
  data.name = d.name || '';
  data.background = d.background;
  data.color = d.color;

  Object.assign(options, meta2d.getOptions());
});

const onChangeData = () => {
  Object.assign(meta2d.store.data, data);
  meta2d.store.patchFlagsBackground = true;
  meta2d.render();
};

// const onChangeOptions = () => {
//   meta2d.setOptions(options);
//   meta2d.store.patchFlagsTop = true;
//   meta2d.store.patchFlagsBackground = true;
//   meta2d.render();
// };
</script>
<style lang="scss" scoped>
  :deep(.t-form) {
    .t-form__item {
      margin-bottom: 8px;
    }
    .t-form__label {
      padding-right: 8px;
      label {
        font-size: 12px;
        font-weight: 400;
        color: #7f838c;
        line-height: 18px;
        letter-spacing: 0px;
      }
    }

    .t-divider {
      margin: 12px 0;
    }

    .t-input--auto-width {
      width: 100%;
    }
  }
  :deep(.t-collapse-panel__wrapper) {
    border-bottom: solid 1px var(--td-component-border);
    .t-collapse-panel__content {
      padding: 8px 12px;
    }
  }
</style>